<!--
 * 上传头像 - 无删除按钮，点击可替换
 * @Author: ziro
 * @Date: 2023/01/02 15:16:40
 -->
<template>
  <div>
    <el-upload ref="imageAvatar"
               class="avatar-uploader"
               :data="{'path':path}"
               :name="name"
               :action="action===''?$baseServer+'/upload/images':action"
               :show-file-list="false"
               :multiple="false"
               :before-upload="imgBeforeUpload"
               :on-success="imgUploadSuccess"
               accept="image/*"
    >
      <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'ImageAvatar',
  props: {
    // 上传图片路径
    value: {type: String, default: ''},
    // 表单名称
    name: {type: String, default: 'filename'},
    // 上传接口地址
    action: {type: String, default: ''},
    // 上传文件路径，可为空
    path: {type: String, default: ''},
    // 上传文件大小限制，单位：kb（默认1mb）
    limitSize: {type: Number, default: 1024}
  },
  data() {
    return {
      // 图片列表
      dialogImageUrl: ''
    }
  },
  watch: {
    value() {
      this.loadImg()
    }
  },
  mounted() {
    this.loadImg()
  },
  methods: {
    loadImg() {
      if (this.value !== null && this.value !== '') {
        this.dialogImageUrl = this.$baseServer + this.value
      } else {
        this.dialogImageUrl = ''
      }
    },
    imgUploadSuccess(response, file, fileList) {
      // 给value赋值
      this.$emit('input', response.data[0].fileUrl)
      this.dialogImageUrl = URL.createObjectURL(file.raw)
    },
    // 图片大小和格式限制
    imgBeforeUpload(file) {
      let isRightSize = file.size / 1024 < this.limitSize
      if (!isRightSize) {
        let sizeStr = this.limitSize + 'KB';
        if (this.limitSize >= 1024) {
          sizeStr = (this.limitSize / 1024) + 'MB';
        }
        this.$message.error('文件大小超过 ' + sizeStr)
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('请选择正确的图片！')
      }
      return isRightSize && isAccept
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
